<template>
	<view class="classese">
		<!-- <view class="nav">
			<image src="../../../static/image/icons/arr-l.png" mode=""></image>
			<view class="title">
				
			</view>
		</view> -->
		<view class="goods-nav" :style="{ 'margin-top': this.distanceY }">
			<view class="nav-item" @tap="changeMenu('news')"  :class="{ active: current == 'news' }">
				新品
			</view>
			<view class="nav-item" @tap="changeMenu('sales')" :class="{ active: current == 'sales' }">
				销量
			</view>
			<view class="nav-item" @tap="changeMenu('price')" :class="{ active: current == 'price' }">
				价格
			</view>
			<view class="nav-item" @tap="changeMenu('select')" :class="{ active: current == 'select' }">
				筛选
			</view>
		</view>
		<view class="classese-con">
			<view class="classese-item" v-for="item in productList" @tap='goDetail(item.id)'>
				<image :src="item.cover_img" mode=""></image>
				<view class="info">
					<view class="name">
						{{ item.gname }}
					</view>
					<view class="price_address">
						<text class="price">￥{{ item.price_now }}</text>
						<text class="address">{{ item.origin_city }}</text>
					</view>
				</view>
			</view>
			<view class="no-data">
				<!-- 没有更多数据了 -->
				<uni-load-more :status="more"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import { list } from '../../../utils/kind/classese/index.js';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		data () {
			return {
				kindId: '',
				productList: [],
				start: 1,
				noData: false,
				current: 'news',
				more: 'more',
				distanceY: 0
			}
		},
		methods: {
			async getProductList () {
				this.more = 'loading';
				let data =  await list({
					kindId: this.kindId,
					start: this.start,
					limit: '10'
				});
				console.log(data);
				// 动态设置标题
				uni.setNavigationBarTitle({
				    title: `${data.data.kind.ctitle}`
				});
				this.productList.push(...data.data.data.list);
				if (this.start == data.data.data.totalPage) {
					this.more = 'noMore';
				}
				this.more = 'noMore';
			},
			changeMenu (val) {
				this.current = val;
				if (this.current == 'price') {
					this.productList = this.productList.sort(this.compare('price_now'));
					} else {
						console.log('触发了')
						this.productList = [];
						// this.productList = this.productList.sort(this.compareLower('price_now'));
						this.getProductList();
						// console.log(this.productList)
					}
			},
			compare(property){
			    return function(a,b){
			        var value1 = a[property];
			        var value2 = b[property];
			        return value2 - value1;
			    }
			},
			goDetail (id) {
				// console.log(id);
				uni.navigateTo({
					url: `/pages/kind/detail/detail?id=${id}`
				})
			}
		},
		onLoad(option) {
			// console.log(option)
			this.kindId = option.id;
			// console.log(this.kindId, option.id);
			this.getProductList()
		},
		onPullDownRefresh() {
			// console.log('用户下拉了');
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500);
		},
		onReachBottom() {
			// console.log('触底了')
			this.start++;
			this.getProductList();
		},
		components: {
			uniLoadMore
			},
		onShow() {
			console.log(uni.getSystemInfoSync());
			
			this.distanceY = uni.getSystemInfoSync().windowTop + 'px';
		}
	}
</script>

<style lang="scss" scoped>
	.classese {
		.goods-nav {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
			height: 60rpx;
			width: 100vw;
			box-sizing: border-box;
			padding: 0 94rpx;
			background-color: #354E44;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.nav-item {
				position: relative;
				height: 100%;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #FFFFFF;
				letter-spacing: 2.14rpx;
				&::after {
					position: absolute;
					bottom: 0;
					right: 0;
					content: '';
					width: 62rpx;
					height: 2rpx;
					background: #fff;
					border: 2rpx solid #F1ECE7;
					border-radius: 10rpx 10rpx 0 0;
					display: none;
				}
				&.active {
					&::after {
						display: block;
					}
				}
			}
		}
		.classese-con {
				width: 100%;
				border-radius: 30rpx;
				background-color: #F1ECE7;
				box-sizing: border-box;
				margin-top: 60rpx;
				padding: 0 40rpx;
				display: flex;
				flex-wrap: wrap;
				.classese-item {
					margin-top: 72rpx;
					padding-bottom: 20rpx;
					width: 316rpx;
					background-color: #fff;
					border-radius: 10rpx;
					&:nth-child(2n-1) {
						margin-right: 38rpx;
					}
					image {
						width: 100%;
						height: 238rpx;
					}
					.info {
						box-sizing: border-box;
						padding:0 30rpx 0 36rpx;
						font-size: 26rpx;
						color: #3E3E3E;
						font-weight: bolder;
						.name {
							margin: 28rpx 0 26rpx;
							letter-spacing: 1.86rpx;
						}
						.price_address {
							display: flex;
							justify-content: space-between;
							.price {
								// letter-spacing: 1.86px;
							}
							.address {
								font-weight: normal;
							}
						}
					}
				}
				.no-data {
					width: 100%;
					height: 80rpx;
					display: flex;
					justify-content: center;
					color: rgb(119, 119, 119);
					align-items: center;
				}
		}
	}
</style>
